<template>
  <div class="max" style="background: #F5F5F5;">
    <my-header>
      <div slot="title">通知公告</div>
      <div slot="right" @click="$router.push('/makeAnAt')" v-if="access!='kinsfolk'">发布</div>
    </my-header>
    <div class="cont">
      <mescroll-vue ref="mescroll" :up="mescrollUp" @init="mescrollInit">
        <div id="dataList">
          <div class="atList pr oh" v-for="item in atList" @click="readNotice(item)">
            <img src="../../../static/img/weidu.png" v-if="item.read == 0" alt="" class="pa"
                 style="right: 0;top: 0;width: 30px;">
            <img src="../../../static/img/yidu.png" alt="" v-else class="pa" style="right: 0;top: 0;width: 30px;">
            <div class="at-title tc ellipsis">
              {{item.title}}
            </div>
            <div class="at-name-time flex">
              <li class="weui-media-box__info__meta">{{item.createByName}}</li>
              <li class="weui-media-box__info__meta weui-media-box__info__meta_extra">{{item.createTime}}</li>
            </div>
            <div class="at-cont ellipsis-clamp2">
              {{item.content||item.link}}
            </div>
            <div class="weui-cell weui-cell_access read-tips">
              <div class="weui-cell__bd">查看详情</div>
              <span class="weui-cell__ft"></span>
            </div>
          </div>
        </div>
      </mescroll-vue>
    </div>
    <my-foot tab="/announcement"></my-foot>
  </div>
</template>

<script>
  import myFoot from '@/components/Footer.vue'

  export default {
    components: {
      myFoot,
    },
    data() {
      return {
        custom: this.$Cookies.get('custom'),
        atList: [],
        access: '',
        mescroll: null, // mescroll实例对象
        mescrollUp: {
          callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page, mescroll) { getListData(page); }
          page: {
            num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
            size: 5, // 每页数据的数量
            total: 5
          },
          empty: {
            // 列表第一页无任何数据时,显示的空提示布局; 需配置warpId才生效;
            warpId: 'dataList', // 父布局的id;
            tip: '暂无相关数据~', // 提示
          },
          noMoreSize: 1, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
          lazyLoad: {
            use: true // 是否开启懒加载,默认false
          }
        },
      }
    },
    methods: {
      mescrollInit(mescroll) {
        this.mescroll = mescroll // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
      },
      upCallback(page, mescroll) {
        this.$http.fetchNotice({
          current: page.num,
          size: page.size,
        }).then(resp => {
          if (page.num === 1) this.atList = []; // 如果是第一页需手动置空列表
          this.atList = this.atList.concat(resp.data.records); // 把请求到的数据添加到列表
          let hasNext = resp.data.current == resp.data.pages ? false : true; //判断是否还有下一页
          if (this.custom === 'true') hasNext = false;
          this.$nextTick(() => { // 数据渲染成功后,隐藏下拉刷新的状态；
            mescroll.endSuccess(this.atList.length, hasNext);
          })
        }).catch(error => {
          mescroll.endErr()
        })
      },
      readNotice(notice) {
        if (notice.read === 0) {
          this.$http.readNotice(notice);
        }
        this.$router.push({
          path: '/announcementContent',
          query: notice
        });
      },
    },
    mounted() {
      this.mescroll.resetUpScroll();
    },
    created() {
      this.access = this.$Cookies.get('loginType');
    }
  }
</script>

<style scoped>
  .atList {
    margin: 15px auto;
    width: calc(100% - 2rem);
    box-sizing: border-box;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 1);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0);
  }

  .at-title {
    margin: auto;
    padding: 1rem;
    font-size: 1.6rem;
  }

  .at-name-time {
    justify-content: center;
    color: rgba(189, 189, 189, 1);
    font-size: 1.2rem;
    line-height: 1;
    height: 1.2rem;
    box-sizing: border-box;
    margin: auto;
  }

  .at-name-time >>> li {
    height: 100%;
  }

  .at-cont {
    margin: 1rem auto;
    width: 100%;
    padding: 0 1rem;
    color: rgba(132, 132, 132, 1);
    font-size: 1.4rem;
    text-align: left;
    box-sizing: border-box;
  }

  .weui-cell.read-tips {
    width: 100%;
    font-size: 1.2rem;
    padding: 1rem;
    text-align: left;
    color: rgba(132, 132, 132, 1);
  }

  .weui-cell.read-tips::before {
    left: 0;
  }
</style>
